import * as React from "react";
import { Button } from "antd";
import IconFont from "../../assets/ICON";

export interface EleAndWaterProps {
  style?: any;
  onChange?: (type: number) => any;
}

export interface EleAndWaterState {}

class EleAndWater extends React.Component<EleAndWaterProps, EleAndWaterState> {
  state = { type: 1 };
  setValue = (type: number) => {
    this.setState({ type: type });
    if (this.props.onChange) {
      this.props.onChange(type);
    }
  };
  componentWillMount() {
    if (this.props.onChange) {
      this.props.onChange(1);
    }
  }
  render() {
    return (
      <>
        <div className="changeType_btn d_inlineFlex" style={this.props.style}>
          <Button
            className="left"
            type={this.state.type === 1 ? "primary" : "default"}
            icon={<IconFont type="icon_dian" />}
            onClick={() => {
              this.setValue(1);
            }}
          >
            电
          </Button>
          <Button
            className="right"
            type={this.state.type === 2 ? "primary" : "default"}
            icon={<IconFont type="icon_shui" />}
            onClick={() => {
              this.setValue(2);
            }}
          >
            水
          </Button>
        </div>
      </>
    );
  }
}

export default EleAndWater;
